<template>
	<div>
		<head-item></head-item>
		<router-view></router-view>
		<footer-item></footer-item>
		<div class="standard-handle" v-if="scrollHeight>100">
			<div class="handle-li" @click="referenceTab">
				<div class="handle-li_ig2">在线咨询</div>
			</div>
			<div class="handle-zdct" @click="stickTab">
				<img class="handle-li_ig3" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-17/63eefc0ca54f2eb4a1a6aafe.png" />
			</div>
		</div>
	</div>
</template>
<script>
	import headItem from './widget/head-item.vue'
	import footerItem from './widget/footer-item.vue'
	export default {
		components: {
			headItem,
			footerItem
		},
		data() {
			return {
				scrollHeight: 0
			}
		},
		computed: {
			key() {
				return this.$route.path + Math.random()
			}
		},
		mounted() {
			window.addEventListener('scroll', this.scrolling, true)
		},
		methods: {
			scrolling() {
				this.scrollHeight = document.documentElement.scrollTop || document.body.scrollTop
			},
			stickTab() {
				// document.body.scrollTop = document.documentElement.scrollTop = 0
				const upRoll = setInterval(() => {
					const top = document.documentElement.scrollTop || document.body.scrollTop // 每次获取页面被卷去的部分
					const speed = Math.ceil(top / 10) // 每次滚动多少 （步长值）
					if (top > 0) {
						document.body.scrollTop = document.documentElement.scrollTop = top - speed // 不在顶部 每次滚动到的位置
					} else {
						clearInterval(upRoll) // 回到顶部清除定时器
					}
				}, 10)
			},
			referenceTab() {
				window.open('https://plt.zoosnet.net/LR/Chatpre.aspx?id=PLT69767722&lng=cn')
			}
		}
	}
</script>
<style lang="scss">
	body,
	div,
	p,
	span {
		font-family: '微软雅黑' !important;
	}

	// 按92vw 0.0696倍计算
	.standard-handle {
		position: fixed;
		right: 4vw;
		bottom: 20%;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;

		.handle-li {
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;
			background-color: #e60012;
			width: 80px;
			height: 80px;
			border-radius: 80px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			.handle-li_ig2 {
				width: 40px;
				text-align: center;
				font-size: 16px;
				color: #fff;
				line-height: 1;
				letter-spacing: 2px;
				text-align: center;
				line-height: 1.1;
			}
		}

		.handle-zdct {
			background-color: rgba(0, 0, 0, 0.7);
			width: 45px;
			height: 45px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-top: 0.5vw;
			cursor: pointer;

			.handle-li_ig3 {
				width: 20px;
			}
		}
	}
</style>